<div class="container">
    <h2 class="mt-4"><%= gettext "Your Profile" %></h2>
    <%= live_redirect gettext("View Public Profile"), class: "btn btn-primary mb-4", to: Routes.user_profile_path(@conn, :index, @user.username) %>

    <%= form_for @profile_changeset, Routes.user_settings_path(@conn, :update_profile), [multipart: true, class: "form"], fn f -> %>

    <div class="card">
        <div class="card-body">
        <div class="row">
            <div class="col-md-4">
                <div class="text-center">
                    <h5 class="mt-4"><%= gettext("Settings") %></h5>
                    <img src="<%= Glimesh.Avatar.url({@user.avatar, @user}, :original) %>" alt="Your Profile Picture"
                         class="img-fluid mb-4 img-avatar">

                    <div class="mb-4 text-left">
                        <p><%= gettext("Click Update Settings down below when you've chosen the file.") %> </p>
                        <%= file_input f, :avatar, id: "customFile", class: "", accept: "image/png, image/jpeg" %>
                    </div>
                </div>
            </div>
            <div class="col-md-8">
                <h5 class=""><%= gettext "Settings" %></h5>

                <%= if @profile_changeset.action do %>
                <div class="alert alert-danger">
                    <p style="margin-bottom: 0px;"><%= gettext "Oops, something went wrong! Please check the errors below." %></p>
                </div>
                <% end %>

                <div class="row">
                    <div class="col-sm-6">
                        <div class="form-group">
                            <%= label f, gettext("Display Name") %>
                            <%= text_input f, :displayname, [class: "form-control"]%>
                            <%= error_tag f, :displayname %>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="form-group">
                            <%= label f, gettext("Language") %>
                            <%= select f, :locale, [English: "en", Español: "es", "Español rioplatense": "es_AR", "Español mexicano": "es_MX", Deutsche: "de", 日本語: "ja", "Norsk Bokmål": "nb", Français: "fr", Svenska: "sv", "Tiếng Việt": "vi", "Русский": "ru" ], [class: "form-control"] %> <!-- This will manually need to be populated as languages are completed. Format: Displayname: "locale_code"-->
                            <%= error_tag f, :email %>
                        </div>
                    </div>
                </div>
                <div class="info">
                    <h5 class=""><%= gettext "Social" %></h5>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="input-group social-tweet mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text" id="tweet"><i
                                                class="fab fa-twitter"></i></span>
                                </div>
                                <%= text_input f, :social_twitter, [class: "form-control", placeholder: gettext("Twitter Username")] %>
                                <%= error_tag f, :social_twitter %>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="input-group social-instagram mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text" id="instagram"><i
                                                class="fab fa-instagram"></i></span>
                                </div>
                                <%= text_input f, :social_instagram, [class: "form-control", placeholder: gettext("Instagram Username")] %>
                                <%= error_tag f, :social_instagram %>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="input-group social-youtube mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text" id="fb"><i
                                                class="fab fa-youtube"></i></span>
                                </div>
                                <%= text_input f, :social_youtube, [class: "form-control", placeholder: gettext("YouTube Username")] %>
                                <%= error_tag f, :social_youtube %>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="input-group social-discord mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text" id="discord"><i
                                                class="fab fa-discord"></i></span>
                                </div>
                                <%= text_input f, :social_discord, [class: "form-control", placeholder: gettext("Discord Server URL")] %>
                                <%= error_tag f, :social_discord %>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <%= label f, :youtube_intro_url, gettext("YouTube Teaser URL") %>
                    <%= text_input f, :youtube_intro_url, [class: "form-control mb-4", placeholder: "https://www.youtube.com/watch?v=dQw4w9WgXcQ"] %>
                    <%= error_tag f, :youtube_intro_url %>
                </div>

                <div class="form-group">
                    <%= label f, :profile_content_md, gettext("Profile Content (Markdown supported)") %>
                    <%= textarea f, :profile_content_md, [class: "form-control mb-4", rows: 20] %>
                    <%= error_tag f, :profile_content_md %>
                </div>

                <%= submit gettext("Update Settings"), class: "btn btn-primary" %>
            </div>
        </div>
        </div>
    </div>
    <% end %>


</div>
